<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>传悦案例-列表页</title>
	<link rel="stylesheet" href="style/style.css">
	<script src="js/jquery.min.js"></script>
	<script>
		$(function(){

			$.ajax({
				url:"http://10.35.164.50:8080/getanliList",
				success:function(data){
					let list = JSON.parse(data);
					let template = $("#template");

					list.forEach(function(item){
						let newItem = template.clone();
						newItem.attr("id","")
						newItem.find(".data-img").attr("src","images/" + item.faceImg);
						newItem.find(".data-title").html(item.title);
						newItem.find("a").attr('href',newItem.find("a").attr('href')+`?id=${item.id}`)
						let tagList = item.tag.split(" ");

						tagList.forEach(item=>{
							$(`<li>${item}</li>`).appendTo(newItem.find(".data-tag"))
						})
						newItem.appendTo($(".itemList"))
					})					
				}

			})

		})
	</script>
</head>
<body>
	<div class="top">
		<div class="content">
			<img src="images/logo.png" class="logo" alt="">
			<ul class="nav">
				<li><a href="#">网站首页</a></li>
				<li><a href="#">传悦资源</a></li>
				<li class="focus"><a href="list.html">传悦案例</a></li>
				<li><a href="#">传悦服务</a></li>
				<li><a href="#">解决方案</a></li>
				<li><a href="#">需求提交</a></li>
			</ul>
		</div>
	</div>


	<div class="banner">
		<img src="images/banner_exam.png" alt="">
		<div class="mianbaoxue">
			<ul class="content">
				<li><a href="#">网站首页</a></li>
				<li><a href="#">传悦案例</a></li>
			</ul>
		</div>
	</div>
	
	<div class="content">
		<ul class="tab">
			<li class="focus">全部</li>
			<li>网站建设</li>
			<li>推广运营</li>
			<li>品牌策划</li>
			<li>网络全案</li>  
		</ul>
		<ul class="itemList">
			<li id="template">
				<a href="details.html">
					<div class="imgWrap"><img src="" class="data-img" alt=""></div>
					<h2 class="data-title"></h2>
					<ul class="data-tag">
					</ul>
				</a>
			</li>
		</ul>
		

		<ul class="page">
			<li><a href="#">&lt;</a></li>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">&gt;</a></li>
		</ul>
	</div>

	<div class="bottom">
		<div class="content">
			<img src="images/logo-bottom.png" class="bottom-logo" alt="">
			<ul class="bottom-nav">
               <li><a href="#">关于传悦</a></li>
               <li><a href="#">新闻动态</a></li>
               <li><a href="#">传悦观点</a></li>
               <li><a href="#">联系传悦</a></li>
               <li><a href="#">加入传悦</a></li>
               <li><a href="#">付款账户</a></li>
			</ul>
			<p>Copyright ©2013  创梦网络科技有限责任公司  ‖  传悦 Chnyoo.cn All Rights Reserved    京ICP备12005221号 </p>
		</div>
	</div>
</body>	
</html>